import React, { useEffect, useState } from 'react'
import './MyDetail.scss'
import { useLocation,useHistory } from 'react-router-dom'
import { useObserver } from 'mobx-react-lite'
import useStore from '../context/useStore'
import { detailFace } from '../utils/interface'
import {RankDropList} from '../utils/interface'
import Search from '../store/module/search'
const MyDetail: React.FC = () => {
  let location = useLocation()
  let history = useHistory()
  let [list, setList] = useState<Object>({})
  let [text, setText] = useState<string>('')
  let { myDetail } = useStore()
  //返回上一页
  function back() {
    history.goBack()
  }
  useEffect(() => {
   setList(location.state) 
  }, [location])

  useEffect(() => {
    myDetail.myDetail((location.state as detailFace).id)
  }, [location, myDetail])

  useEffect(() => {
    myDetail.everyList((location.state as detailFace).id)
  }, [location, myDetail])

  function changText(e: React.ChangeEvent<HTMLSelectElement>) {
    setText(e.target.value)
    let arr = JSON.parse(e.target.dataset.item)
    let id = arr.data.filter((item) => {
      return item.name===e.target.value
    })[0].id
    myDetail.filterDetail((location.state as detailFace).id,id)
  }
  return useObserver(() => (
    <div className="mydetail">
      <div className="heads">
        <span onClick={back}><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" width="20" height="20"><path d="M294.13376 512c0-13.70112 5.23264-27.40224 15.6672-37.84704l328.704-328.69376c20.91008-20.91008 54.80448-20.91008 75.70432 0 20.89984 20.89984 20.89984 54.79424 0 75.70432L423.36256 512l290.83648 290.83648c20.89984 20.89984 20.89984 54.80448 0 75.70432-20.89984 20.91008-54.79424 20.91008-75.70432 0l-328.704-328.69376C299.35616 539.40224 294.13376 525.70112 294.13376 512z" p-id="1865"></path></svg></span>
        <h3>{(list as detailFace ).name}</h3>
      </div>
      <div className="guojia">
            {
                myDetail.rankdrop.map((item,index)=>{
                    return <select value={text||item.name} key={index} onChange={changText} data-item={JSON.stringify(item)}>
                        {
                            item.data.map((i,n)=>{
                                return <option value={i.name} key={n} >
                                    {i.name}
                                </option>
                            })
                        }
                    </select>
                })
            }
      </div>
      <div className="mydetail_con">
        <div className="mdc_left">
          <div className="pm">
            <div className="pm_tit">
              <span>排名</span>
              <span>名称</span>
            </div>
            <div className="sssp">
            {
              myDetail.rankDataLis.map((item, index) => {
                 return <div key={index} className="rsl">
                   <div className="mdc_lefy_con">
                     <span>{index + 1}</span>
                     <span>
                       {item[0].image && <img src={item[0].image} alt="" />}
                       {item[0].name}
                     </span>
                </div>
            </div>
              })
            }
            </div>
          </div>
        </div>
        <div className="mdc_right">
          <div className="every">
            <div className="hhhd">
                {
                  myDetail.rankDropList.map((item, index) => {
                    return item.list.map((items, index) => {
                      return <span key={index}>{items.name}</span>
                    })
                  })
                }
            </div>
            <div>
              {
                     myDetail.rankDataLis.map((item:{score:string}[], index) => {
                        return<div key={index}  className="hhhcon">
                           {
                           item.map((i,num)=>{
                               if(num!==0){
                                return <span key={num}>
                                    {i.score}
                                </span>
                               }else{
                                   return ''
                               }
                            })
                        }
                        </div>
                    })
                }
             </div>
          </div>
        </div>
      </div>
    </div>
  ))
}
export default MyDetail
